<template>
  <div id="building">
    <div class="login">
      <div class="user">
        <div class="icon"><i class="el-icon-user" size="20px"></i></div>
        <input class="txt" type="text" placeholder="请输入账号" v-model="username" />
      </div>
      <div class="pass">
        <div class="icon"><i class="el-icon-lock" size="20px"></i></div>
        <input class="txt" type="password" placeholder="请输入密码" v-model="password" />
      </div>
      <button :plain="true" @click="login()">登录</button>
      <div class="down">
        <div class="left"><input class="rem" type="checkbox" checked='true' />记住密码</div>
        <div class="right">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetLoginApi } from "../request/api.js";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      username: "admin",
      password: "123",
    };
  },
  created() { },
  mounted() { },
  methods: {
    login() {
      GetLoginApi({ username: this.username, password: this.password })
        .then((res) => {
          console.log(res);

          if (res.data.code === 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.$router.push("/main");
            Cookies.set("token", res.data.data.token, { expires: 1 / 24 });
            Cookies.set("username", res.data.data.userinfo.userName, {
              expires: 1 / 24,
            });
            Cookies.set("id", res.data.data.userinfo.userId, { expires: 1 / 24 });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gozhuce() {
      this.$router.push("./register");
    },
  },
};
</script>

<style scoped lang="less">
#building {
  // filter: grayscale();
  background: url("../assets/R-C.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  .login {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin-left: 70%;
    margin-top: 10%;
    padding: 0 20px;
    box-sizing: border-box;

    .user {
      display: flex;
      align-items: center;
      margin-top: 50px;

      .icon {
        height: 50px;
        width: 50px;
        background-color: #008ecb;

        i {
          color: #fff;
          font-weight: 700;
          font-size: 30px;
          line-height: 50px;
          margin-left: 6px;
        }
      }
    }

    .pass {
      display: flex;
      align-items: center;
      margin-top: 30px;

      .icon {
        height: 50px;
        width: 50px;
        background-color: #008ecb;

        i {
          color: #fff;
          font-weight: 700;
          font-size: 30px;
          line-height: 50px;
          margin-left: 6px;
        }
      }
    }

    button {
      margin-top: 60px;
      width: 100%;
      height: 50px;
      background-color: #008ecb;
      color: #fff;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 20px;
      border: none;
    }

    .txt {
      width: 100%;
      height: 50px;
      padding-left: 10px;
      box-sizing: border-box;
    }

    .down {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;

      .left {
        font-size: 12px;
        color: #008ecb;
        line-height: 16px;

        input {
          border-color: #008ecb;
        }
      }

      .right {
        display: flex;
        font-size: 12px;

        .forget {
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
